<template>
	<m-layout class="order-details" :isShow="false" :scrollTop="scrollTop" color="#ffffff" scrollColor="#304FFF" gap="30 24 20" barBg="unset">
		<view slot="header" class="flex-column mlr-24 pt-20">
			<view class="flex-between">
				<m-image :size="[173, 49]" src="../../static/images/pages/wallet/wallet_title.png" />
			</view>
			<m-block class="walletToal mt-24 flex-column ptb-40 plr-32">
				<view class="flex-between border-bottom pb-32">
					<view class="flex">
						<m-icon type="eye" size="32"></m-icon>
						<text class="text-white fs28 ml-12">資產總估值</text>
					</view>
					<view class="flex">
						<m-icon type="safe" size="24"></m-icon>
						<text class="text-white-70 fs24 ml-12">安全保障中</text>
					</view>
				</view>
				<view class="flex-column mt-24">
					<view class="flex text-white ai-baseline">
						<text class="fs32">￥</text>
						<text class="fs48">{{ totalValues | integer(6) }}</text>
					</view>
				</view>
			</m-block>
		</view>
		<view class="flex-column">
			<view class="flex mb-20">
				<m-icon type="list" size="36"></m-icon>
				<text class="fs26 ml-12 fw-600">資產清單</text>
			</view>
			<m-block gap="20 32" spa="0 0 20 0" bgColor="#E7EFFF" style="position: relative" v-for="item in userbalance">
				<view class="flex-between pb-24" style="border-bottom: 2rpx solid #bcd2ff" @click="Jump(`/pages/wallet/detail/index?coinid=${item.coinid}`)">
					<view class="flex">
						<view class="flex-column">
							<text class="fs32 fw-600">{{ coinConfig[item.coinid]['coinname'] }}</text>
							<view class="flex fs24 text-grey mt-4">
								<text>單價:</text>
								<text>￥ {{ coinConfig[item.coinid]['price'] }}</text>
							</view>
						</view>
					</view>
					<view class="flex-column ai-flex-end">
						<view class="flex fs36 fw-600">
							<text>{{ item.balance | integer(6) }}</text>
						</view>
						<view class="flex fs24 text-grey mt-4">
							<text>￥</text>
							<text>{{ computerValue(item) }}</text>
						</view>
					</view>
				</view>
				<view class="funBox mt-24 flex-between" >
					<view class="flex" @click="Jump(`/pages/wallet/detail/index?coinid=${item.coinid}`)">
						<text class="fs24">明細</text>
						<m-icon size="24" type="icon-qianjin" />
					</view>
					<view class="flex-around" >
						<m-button v-if="[1,4].includes(Number(item.coinid))" class="wallet_bt ml-24" size="small" type="hollow" @click="swapFn(item)">
							<m-icon size="24" type="transfer" />
							<text class="ml-8 fs24">兌換</text>
						</m-button>
						<template v-if="![1,2,3].includes(Number(userinfo.dls))">
							<m-button v-if="Number(coinConfig[item.coinid]['istransfer']) == 1" class="wallet_bt ml-24" size="small" type="hollow" @click="transferFn(item)">
								<m-icon size="24" type="transfer" />
								<text class="ml-8 fs24">轉帳</text>
							</m-button>
							<m-button v-if="Number(coinConfig[item.coinid]['isout']) == 1" class="wallet_bt ml-24" size="small" type="hollow" @click="withdrawFn(item)">
								<m-icon size="24" type="withdraw" />
								<text class="ml-8 fs24">提現</text>
							</m-button>
						</template>
						
					</view>
				</view>
			</m-block>
		</view>
	</m-layout>
</template>

<script>
import { mapState } from 'vuex';
import { balance } from '@/api/Users.js';
export default {
	data() {
		return {
			totalValues: 0,
			scrollTop: 0,
			color: '#fff',
			ftcolor: '#fff'
		};
	},
	computed: {
		...mapState({
			userinfo: (state) => state.user.userinfo,
			userbalance: (state) => state.user.userbalance,
			enum: (state) => state.general.enum,
			coinConfig: (state) => state.general.coinConfig
		})
	},
	onLoad() {},
	async onShow() {
		this.init();
	},
	onPageScroll({ scrollTop }) {
		this.scrollTop = scrollTop;
	},
	onPullDownRefresh() {},
	onReachBottom() {},
	methods: {
		async init() {
			const list = await balance();
			this.getTotalValue(list);
		},
		getTotalValue(list) {
			let a = BigInt(0);
			list.forEach((item) => {
				a += BigInt(this.toWei(this.computerValue(item), 18));
			});
			this.totalValues = this.fromWei(a, 18);
		},
		computerValue(item) {
			const balance = item.balance;
			const price = this.coinConfig[item.coinid]['price'];
			const c = BigInt(this.toWei(balance, 10)) * BigInt(this.toWei(price, 8));
			return this.fromWei(c, 18);
		},
		swapFn(item){
			this.Jump(`/pages/wallet/swap/index?coinid=${item.coinid}`);
		},
		transferFn(item) {
			this.Jump(`/pages/wallet/transfer/transfer?coinid=${item.coinid}`);
		},
		withdrawFn(item) {
			// console.log('this.userinfo===>', this.userinfo);
			// if (!this.userinfo.idcard) return this.Toast('请先完成实名认证');
			if(item.coinid == 1) return this.Jump(`/pages/wallet/payouts/index?coinid=${item.coinid}`);
			this.Jump(`/pages/wallet/withdraw/withdraw?coinid=${item.coinid}`);
		}
	}
};
</script>

<style lang="scss">
.order-details {
	background-image: url('@/static/images/pages/wallet/walletBg.png');
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100% 614rpx;

	::v-deep .top-nav {
		background: unset;
	}

	::v-deep .topbar {
		color: #fff;

		.title {
			color: #fff;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 70%;
		}
	}

	.top {
		padding-bottom: 41rpx;
		text-align: left;
	}

	.text {
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.text1 {
		padding: 0rpx 0 0rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: bold;
		color: #333333;

		text:nth-of-type(1) {
			font-size: 52rpx;
		}

		text:nth-of-type(2) {
			font-size: 72rpx;
		}
	}

	.text2 {
		padding-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.wallet_bt {
		width: 100%;
		border-radius: 10rpx;
		padding: 12rpx 12rpx;
		background: #304fff;
		color: #fff;
	}

	.go {
		background: #fa2b47;
	}

	.list_item {
		padding: 27rpx 0;
		border-top: 1rpx solid #eeeeee;

		.it-text {
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}

		.it-text1 {
			font-size: 26rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #97979f;

			margin-top: 10rpx;
		}
	}
}
.walletToal {
	background: url('../../static/images/pages/wallet/Gradiant.png') !important;
	background-repeat: no-repeat;
	background-size: 100% 260rpx;
	height: 240rpx;
	box-sizing: border-box;
}
</style>
